<template>
  <div class="viewBox" v-if="isShow">
    <!-- 关闭按钮 -->
    <van-icon class="closeBtn" name="close" @click="isShow = false" color="#ee0a24"/>
    <!-- pdf组件 -->
    <div class="pdf-box" v-if="type === 'pdf'">
      <div class="pdf_btn" v-if="pageTotalNum > 1">
        <van-button plain
                    color="#07AC7F"
                    @click="prePage"
        >上一页
        </van-button>
        {{pageNum}}/{{pageTotalNum}}
        <van-button plain
                    color="#07AC7F"
                    @click="nextPage"
        >下一页
        </van-button>
      </div>
      <pdf
        :page="pageNum"
        :src="newSrc"
        @progress="loadedRatio = $event"
        @num-pages="pageTotalNum=$event"
      ></pdf>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import pdf from 'vue-pdf'
  import { Button, Icon, ImagePreview } from 'vant'

  Vue.use(Button).use(Icon).use(ImagePreview)
  export default {
    components: { pdf },
    name: 'Test',
    data () {
      return {
        isShow: false,
        type: '',
        pageNum: 1,
        pageTotalNum: 1, // 总页数
        originSrc: '', // 原始路径
        newSrc: '' // pdf需转换后的新路径
      }
    },
    mounted () {
      //console.log('vViews mounted...')
    },
    watch: {
     isShow: function (newV, oldV) {
        //console.log('show', newV)
     }
    },
    methods: {
      /**
       * 处理展示数据
       */
      async showFile (newVal) {
        //console.log('info', this.type, newVal)
        if (this.type === 'img') {
          //console.log('xxxx:', newVal)
          // 图片预览，这里是后台返回了base64的数据，处理成了blob格式
          // const val = this.$base64ToBlob(newVal, 'image/jpeg')
          // this.newSrc = window.URL.createObjectURL(val)
          // vant自带图片预览组件
          const that = this
          ImagePreview({
            // images: [this.newSrc],
            images: [newVal],
            showIndex: false,
            onClose () {
              that.isShow = false
            }
          })
        }

        if (this.type === 'pdf') {
          //console.log('inner running', this.originSrc)

          this.newSrc = pdf.createLoadingTask(this.originSrc)
          await this.newSrc.promise.then(pdf => {
            //console.log('.......running')
            this.pageNum = 1
            this.pageTotalNum = pdf.numPages
            //console.log('.......numPages', this.pageTotalNum)
          })
          // pdf预览
          // const val = this.$base64ToBlob(newVal, 'application/pdf')
          // const href = window.URL.createObjectURL(val)
        }
      },

      prePage () {
        let page = this.pageNum
        page = page > 1 ? page - 1 : this.pageTotalNum
        this.pageNum = page
      },
      /**
       * 下一页
       */
      nextPage () {
        let page = this.pageNum
        page = page < this.pageTotalNum ? page + 1 : 1
        this.pageNum = page
      }

    }
  }
</script>

<style lang="less" scoped>
  .viewBox {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;

    .closeBtn {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 10;
      font-size: 24px;
    }

    .pdf-box, .word-box, .table-box, .txt-box {
      width: 100vw;
      height: 100vh;
    }

    .pdf-box {
      .pdf_btn {
        padding: 0 10px;
        height: 44px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;

        /deep/ .van-button {
          margin: 0 2px;
          height: 24px;

          &:nth-child(1) {
            border-radius: 15px 0 0 15px;
          }

          &:nth-child(2) {
            border-radius: 0 15px 15px 0;
          }
        }
      }

      > span {
        width: 100%;
        height: calc(100% - 44px);
      }
    }
  }
</style>
